<template>
  <!-- 测试 -->
  <HomePannel ref="target" title="新鲜好物" subTitle="新鲜出炉 品质靠谱">
    <template #right>
      <XtxMore />
    </template>
    <!-- <ul ref="pannel" class="goods-list">
      <li v-for="item in prdList" :key="item.id">
        <RouterLink to="/">
          <img :src="item.picture" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="price">&yen;{{ item.price }}</p>
        </RouterLink>
      </li>
    </ul> -->

    <!-- 商品列表 -->
    <!-- 把商品数据数组,传给子组件标签 -->
   <HomeList :goods='prdList'/>

  </HomePannel>
</template>

<script>
// 导入组件
import HomePannel from './home-panel.vue'
// 导入获取数据接口
import { findNew } from '@/api/home'
// 导入vue函数
import { ref } from 'vue'
// 导入商品列表渲染组件
import HomeList from './home-list.vue'
// 导入定义好的数据懒加载的函数
import { useObserver } from '@/hock/index'

// 代码优化(获取数据)---> vue3的函数式编程思想(自定义钩子函数)
const useNew = () => {
  // 商品列表
  const prdList = ref([])
  // 获取商品列表的方法
  const getPrdList = async () => {
    // 调用接口
    const { result } = await findNew()
    //   console.log(result)
    // 把数据赋值
    prdList.value = result
  }
  // // 挂载后,获取数据
  // onMounted(() => {
  //   // 调用获取
  //   getPrdList()
  // })
  return { prdList, getPrdList }
}

export default {
  // 注册组件
  components: {
    HomePannel,
    HomeList
  },

  // 入口函数
  setup () {
    // 优化获取数据
    // 调用函数解构赋值,解构出商品列表和 获取商品列表方法
    const { prdList, getPrdList } = useNew()
    // 调用数据懒加载的方法,并把获取数据的方法传参过来,最后解构出target
    const { target } = useObserver(getPrdList)
    // // 商品列表
    // const prdList = ref([])
    // // 获取商品列表的方法
    // const getPrdList = async () => {
    //   // 调用接口
    //   const { result } = await findNew()
    //   //   console.log(result)
    //   // 把数据赋值
    //   prdList.value = result
    // }

    // // 挂载后,获取数据
    // onMounted(() => {
    //   // 调用获取
    //   getPrdList()
    // })

    return { prdList, target }
  }
}
</script>
